<template>
	<view>
		<navbar title="我的任务" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<view class="" style="padding: 20rpx 0;">
					<u-tabs :list="list4" lineWidth="26rpx" lineHeight='7rpx' lineColor="#3262FD" :activeStyle="{
					            color: '#323438',
					            fontWeight: 'bold',
					            transform: 'scale(1)'
					        }" :inactiveStyle="{
					            color: '#949494',
								fontWeight: 'bold',
					            transform: 'scale(1)'
					        }" itemStyle="width:345rpx;padding:0;height:60rpx;" @click="clicktab">
					</u-tabs>
				</view>
				<scroll-view scroll-y="true" class="scbox">
					<view class="list">
						<view class="list__item" v-for="(item,index) in list" :key="index"
							v-if="item.status!=1||status!=''"
							@click="navto('/pages/tool/mytask?id='+item.id+'&customerid='+item.customer_id+'&customername='+item.customerName)">
							<view class="" @click.stop="clickwc(item)">
								<image src="/static/stak/dh.png" v-if="item.type==1" class="list__item__icon" mode="">
								</image>
								<image src="/static/tool/dx.png" v-if="item.type==2" class="list__item__icon" mode="">
								</image>
								<image src="/static/tool/wx.png" v-if="item.type==3" class="list__item__icon" mode="">
								</image>
								<image src="/static/tool/bf.png" v-if="item.type==4" class="list__item__icon" mode="">
								</image>
							</view>
							<view class="" style="flex: 1;">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="list__item__title" v-if="item.type==1">
										打电话给客户
									</view>
									<view class="list__item__title" v-if="item.type==2">
										发短信给客户
									</view>
									<view class="list__item__title" v-if="item.type==3">
										发微信给客户
									</view>
									<view class="list__item__title" v-if="item.type==4">
										拜访客户
									</view>
									<view class="list__item__status status1" v-if="item.status==2">
										已完成
									</view>
									<view class="list__item__status status2" v-if="item.status==3">
										未完成
									</view>
									<view class="list__item__status status2" v-if="item.status==1">
										进行中
									</view>
								</view>
								<view class="list__item__text u-flex u-flex-y-center" style="margin-top: 17rpx;">
									<view>
										{{$u.timeFormat(new Date(item.noticetime).getTime(), 'mm月dd日 hh:MM')}}提醒
									</view>
									<view class=""
										style="width: 2rpx;height: 19rpx;background: #F0F0F0;margin: 0 15rpx;">
									</view>
									<view style="color: #3262FD;">
										{{$u.timeFormat(new Date(item.endtime).getTime(), 'mm月dd日 hh:MM')}}截止
									</view>
								</view>
								<view class="list__item__text" style="margin-top: 17rpx;">
									{{item.createName}}创建
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<image src="/static/kh/add.png" class="add" @click="navto('/pages/customer/addtask')" mode=""></image>
		</view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				list4: [{
						name: '已截止',
						status: ''
					},
					{
						name: '进行中',
						status: 1
					},
				],
				status: '',
				list: []
			};
		},
		methods: {
			async getlist() {
				let res = await sale.getTaskMy({
					status: this.status
				})
				if (res.data.code == 1) {
					this.list = res.data.data
				}
			},
			clicktab(e) {
				this.status = e.status
				this.getlist()
			},
			clickwc(item) {
				let _this = this
				if (this.status == 1) {
					if (item.type == 1) {
						this.call(item.customerMobile, item.id, 2)
					} else {
						uni.showModal({
							title: '确定完成该任务？',
							success(r) {
								if (r.confirm) {
									sale.editTask({
										id: item.id,
										status: 2
									}).then(res => {
										if (res.data.code == 1) {
											_this.getlist()
										}
									})

								}
							}
						})
					}
				}
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			background-color: #fff;
			height: calc(100vh - 40rpx - var(--status-bar-height) - 44px);
			border-radius: 20rpx;

			.scbox {
				height: calc(100% - 40rpx - 60rpx);

				.list {
					padding: 20rpx;

					&__item {
						display: flex;
						padding-bottom: 64rpx;

						&__icon {
							width: 72rpx;
							height: 72rpx;
							margin-right: 18rpx;
						}

						&__title {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #1E1E1E;
							line-height: 32rpx;
							padding-top: 10rpx;
						}

						&__status {
							width: 90rpx;
							height: 39rpx;
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							line-height: 20rpx;
						}

						.status1 {
							background: #F0F0F0;
							color: #78797E;
						}

						.status2 {
							background: #FFEBE0;
							color: #FD5832;
						}

						&__text {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #78797E;
							line-height: 24rpx;
						}
					}
				}
			}
		}

	}

	.add {
		position: fixed;
		bottom: 80rpx;
		right: 62rpx;
		width: 97rpx;
		height: 95rpx;
	}
</style>